//主组件
const Cube = (props) => {
	const num = 100;
	const x1 = props.x || num;
	const y1 = props.y || num;
	const z1 = props.z || num;
	const x2 = x1 / 2;
	const y2 = y1 / 2;
	const z2 = z1 / 2;
	const style1 = {
		'width': `${x1}px`,
		'height': `${y1}px`,
	};
	const style2 = {
		item1: {
			transform: `translateZ(${z2}px)`,
		},
		item2: {
			transform: `translateZ(-${z2}px) rotateY(180deg)`,
		},
		item3: {
			width: `${x1}px`,
			height: `${z1}px`,
			top: `${y2-z2}px`,//为了让中间线也占在中央
			transform: `translateY(-${y2}px) rotateX(90deg)`,
		},
		item4: {
			width: `${x1}px`,
			height: `${z1}px`,
			top: `${y2-z2}px`,//为了让中间线也占在中央
			transform: `translateY(${y2}px) rotateX(-90deg)`,
		},
		item5: {
			width: `${z1}px`,
			height: `${y1}px`,
			left: `${x2-z2}px`,//为了让中间线也占在中央
			transform: `translateX(-${x2}px) rotateY(-90deg)`,
		},
		item6: {
			width: `${z1}px`,
			height: `${y1}px`,
			left: `${x2-z2}px`,//为了让中间线也占在中央
			transform: `translateX(${x2}px) rotateY(90deg)`,
		},
	}
	return <div className="ani-cube" style={style1}>
		<div className="ani-cube-item ani-cube-item-1" style={style2.item1}>正面</div>
		<div className="ani-cube-item ani-cube-item-2" style={style2.item2}>背面</div>
		<div className="ani-cube-item ani-cube-item-3" style={style2.item3}>上方</div>
		<div className="ani-cube-item ani-cube-item-4" style={style2.item4}>下方</div>
		<div className="ani-cube-item ani-cube-item-5" style={style2.item5}>左侧</div>
		<div className="ani-cube-item ani-cube-item-6" style={style2.item6}>右侧</div>
	</div>;
}

export default Cube
